<template>
  <div class="fbx-box" id="fbx-box">
    <div class="fbx" @contextmenu.prevent="onContextmenu">
      <div id="fbx-mycnavas" class="fbx-mycnavas" ref="threeTarget"></div>
      <div class="changeBox">
        <div v-for="item in modelList" :key="item.id">
          <input type="button" class="input-button" :value="item.modelName" @click="AddFbxModel(item.modelName)" />
        </div>
      </div>

      <div class="title-box" v-if="show">
        <div class="children">position:{{ cameraPosition.position }}</div>
        <div class="children">rotation:{{ cameraPosition.rotation }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import './LoadFbx.less'
import { Box3, PMREMGenerator, Color, Vector3, MOUSE, MeshBasicMaterial, DoubleSide } from 'three'
import { TEngine } from '@/components/Three/JS/Eengie.js'
import { LightsList } from '@/components/Three/JS/Light.js'
import { HelperList } from '@/components/Three/JS/Helper.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'

var TE
export default {
  data() {
    return {
      color: 'rgb(208, 28, 28)',
      modelList: [
        { modelName: '储水桶' },
        { modelName: '菜床（大单元）' },
        { modelName: '大棚顶部' },
        { modelName: '大棚地板' },
        { modelName: '大棚围墙' },
        { modelName: '养鱼池' },
        { modelName: '水床(最小单元)' },
        { modelName: '微滤机' },
        { modelName: '控制箱' },
        { modelName: '水质传感器' },
        { modelName: '湿地模型' },
        { modelName: '摄像头' },
        { modelName: '气象传感器' },
        { modelName: '模型完整版' },
        { modelName: '移动智地' }
      ],
      aaa: '',
      show: false,
      model: '',
      cameraPosition: { position: {}, rotation: {} }
    }
  },
  mounted() {
    this.Main() // e.preventDefault()
    document.getElementById('fbx-mycnavas').onmousedown = (e) => {
      e.preventDefault()
      if (e.button == 2) {
        this.show && (this.show = true)
        console.log('你点了右键')
        // alert('你点了右键')
      } else if (e.button == 0) {
        this.show = false
        console.log('你点了左键')
        // alert('你点了左键')
      } else if (e.button == 1) {
        this.show = false
        console.log('你点了滚轮')
        // alert('你点了滚轮')
      }
    }

    // window.onload = function () {
    //   //去掉默认的contextmenu事件，否则会和右键事件同时出现。
    //   document.oncontextmenu = function
  },
  methods: {
    Main() {
      const threeTarget = this.$refs.threeTarget
      TE = new TEngine(threeTarget)
      TE.scene.add(...LightsList)
      // TE.scene.add(...HelperList)

      const environment = new RoomEnvironment()
      const pmremGenerator = new PMREMGenerator(TE.renderer)
      TE.scene.background = new Color(0xbbbbbb)
      TE.scene.environment = pmremGenerator.fromScene(environment).texture
      console.log(TE.scene, HelperList, LightsList, 'myTE')
      this.AddFbxModel()
      // this.buildGui()
    },
    AddFbxModel(model) {
      let name = model || '大棚地板'

      const fbxModel = new Promise((resolve, reject) => {
        const fbxLoader = new FBXLoader()

        if (name == '移动智地') {
          fbxLoader.load('/Fbx/Export/移动智地.fbx', (fbx) => {
            console.log(fbx, '加载的fbx模型')
            resolve(fbx)
          })
        } else {
          fbxLoader.load('/Fbx/' + name + '.FBX', (fbx) => {
            console.log(fbx, '加载的fbx模型')
            resolve(fbx)
          })
        }
        reject
      })
      // console.log(fbxModel)
      // this.model && this.model.removeFromParent()
      fbxModel.then((fbxobj) => {
        console.log(fbxobj, 'myfbxobj')
        // this.model = fbxobj
        const box = new Box3().setFromObject(fbxobj)
        const center = box.getCenter(new Vector3())
        console.log(center, 'center')
        name == '大棚围墙' &&
          fbxobj.children[0].material.forEach((element) => {
            element.side = DoubleSide
          })
        var material = new MeshBasicMaterial({
          // 前面FrontSide  背面：BackSide 双面：DoubleSide
          side: DoubleSide
        })
        console.log(material)
        TE.scene.add(fbxobj)
      })
    },
    //  右击菜单
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: '获取相机点位',
            onClick: () => {
              this.message = '返回(B)'
              this.show = true
              this.ShowCameraPosition()
            }
          },

          {
            label: '移动模型',
            divided: true,
            minWidth: 0,
            onClick: () => {
              this.show = false
              // TE.scene.remove(TE.transformControls)
              // TE.scene.add(TE.transformControls)
              TE.transformControls.attach(TE.exportModel)
              console.log(TE.orbitControls, 'orbitControls')
              TE.orbitControls.mouseButtons = {
                LEFT: null,
                MIDDLE: MOUSE.DOLLY,
                RIGHT: MOUSE.PAN
              }
              console.log(TE.exportModel)
            }
            // children: [{ label: '翻译成简体中文' }, { label: '翻译成繁体中文' }]
          },
          {
            label: '删除模型',
            minWidth: 0,
            onClick: () => {
              this.message = '截取可视化区域'
              console.log(TE.exportModel)
              TE.exportModel && TE.exportModel.removeFromParent()
              console.log('截取可视化区域')
            }
          }
        ],
        event, // 鼠标事件信息
        customClass: 'custom-class', // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 230 // 主菜单最小宽度
      })
      return false
    },
    //获取相机位置
    ShowCameraPosition() {
      this.cameraPosition.position = {}
      this.cameraPosition.rotation = {}
      this.cameraPosition.position.x = TE.camera.position.x.toFixed(6)
      this.cameraPosition.position.y = TE.camera.position.y.toFixed(6)
      this.cameraPosition.position.z = TE.camera.position.z.toFixed(6)
      this.cameraPosition.rotation.x = TE.camera.rotation.x.toFixed(6)
      this.cameraPosition.rotation.y = TE.camera.rotation.y.toFixed(6)
      this.cameraPosition.rotation.z = TE.camera.rotation.z.toFixed(6)
      console.log(TE.camera)
    }
  }
}
</script>
<style lang="less" scoped></style>
